<template>
  <div class="diylist" :style="{background: comObj.essentialKey.background}">
    <div class="TabControl" v-if="comObj.tabArray.length > 0">
      <!-- 选项卡 -->
      <tabs v-model="active">
        <tab :title="item.title" v-for="(item, index) in comObj.tabArray" :key="index"></tab>
      </tabs>
    </div>

    <!-- 类型一 -->
    <div v-if="comObj.listStyle == 0">
      <div class="listcon acrossList" v-for="(items, index) in comObj.essentialKey.listNum" :key="index">
        <div class="lfts">
          <img src="http://img.tupian114.com/20131104/2236142472.jpg" alt="">
        </div>

        <div class="rgts">
          <!--列表文本组件-->
          <div class="rowTitle">
            <span :style="{'color' : comObj.fontColor.titleColor}" >极米无屏电视H2 高清智能3D投影仪小型家用投影机1080P无线WIFI家用投影机...</span>
          </div>

          <div class="subheading">
            <span >自定义商品副标题，一行显示，多余...表示多余...表示</span>
          </div>

          <div class="listAct">
            <div class="ActivityLabel">
              <el-tag type="danger" size="mini" effect="plain">满300-30</el-tag>
              <el-tag type="danger" size="mini" effect="plain">新品</el-tag>
            </div>
          </div>

          <!--列表旧价格组件   -->
          <div class="amendPrice editlocal" >
            <span :style="{'color' : comObj.fontColor.priceColor}">￥300.00元</span>
            <span class="evaluate" :style="{'color' : comObj.fontColor.evalColor}">50+评价</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 类型二 -->
    <div v-if="comObj.listStyle == 1" class="sortFlex">
      <div class="listcon subfield" v-for="(items, index) in comObj.essentialKey.listNum" :key="'info-' + index">
      <!-- 列表图片组件 -->
        <div class="twoImgStyle">
          <img src="http://img.tupian114.com/20131104/2236142472.jpg" alt />
        </div>
        <!-- 标题 -->
        <div class="amendTitle" >
          <span style="font-size:12px;" :style="{'color' : comObj.fontColor.titleColor}">卡拉丁上门汽车保养服务奔驰宝马奥迪大众雪佛收到货付款接收到</span>
        </div>
        <!--列表按钮组件-->
        <div class="amendActivity">
          <div class="ActivityLabel">
            <el-tag type="danger" size="mini" effect="plain">满300-30</el-tag>
            <el-tag type="danger" size="mini" effect="plain">新品</el-tag>
          </div>
        </div>

        <!--列表价格组件-->
        <div class="amendPrice">
          <span :style="{'color' : comObj.fontColor.priceColor}">￥300.00元</span>
          <span class="evaluate" :style="{'color' : comObj.fontColor.evalColor}">50+评价</span>
        </div>
      </div>
    </div>
      <!-- 类型三 -->
    <div v-if="comObj.listStyle == 2" class="sortFlex">
      <div class="listcon styleThree" v-for="(items, index) in comObj.essentialKey.listNum" :key="'info-' + index">
      <!-- 列表图片组件 -->
        <div class="ThreeImgStyle">
          <img src="http://img.tupian114.com/20131104/2236142472.jpg" alt />
        </div>
        <!-- 标题 -->
        <div class="amendTitle" >
          <span style="font-size:12px;" :style="{'color' : comObj.fontColor.titleColor}">卡拉丁上门汽车保养服务奔驰宝马奥迪大众雪佛收到货付款接收到</span>
        </div>

        <!--列表价格组件-->
        <div class="amendPrice">
          <span :style="{'color' : comObj.fontColor.priceColor}" class="font14">￥300.00元</span>
          <!-- <span class="evaluate" :style="{'color' : comObj.fontColor.evalColor}">50+评价</span> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script src="./list.js"></script>
<style lang="scss" scoped>
@import "./list.scss";
</style>

<style lang="scss">
.vdr.active:before {
  outline: 0;
}
</style>
